<template>
  <header id="page-header" class="clear-fix" style="z-index: 50;">
    <div class="header-left">
      <h1><a href="">YODA DX7700</a></h1>
    </div>
    <div class="header-right">
      <div class="notification">
        <el-badge :value="200" :max="99" class="item">
          Alert
        </el-badge>
        <el-badge :value="100" :max="10" class="item">
          Jobs
        </el-badge>
      </div>

      <div class="user-area">
        <div class="username">Welcome,<span>admin</span></div>
        <div class="logout"><a href="" title="退出登录"></a><i class="icon-esc"></i></div>
      </div>
    </div>
  </header>
</template>

<script>
  export default {
    name: 'common_header',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss">
  .item {
    margin-right: 40px;
  }
</style>
